<template>
  <div class="detail">
    <div class="main-box">
      <div class="clearfix">
        <div class="pro-pic">
          <div class="pic-box">
            <el-carousel :interval="3000" arrow="always" height="449px">
              <el-carousel-item v-for="value in imgs" :key="value">
                <img :src="value" alt />
              </el-carousel-item>
            </el-carousel>
            <!-- <img
              src="https://shop.io.mi-img.com/app/shop/img?id=shop_604ecc0a9ee3fcc59db964d0fa6a0074.jpeg&crop=a_0_95_1080_1080&w=366&h=366&t=webp"
              alt
            >-->
          </div>
        </div>
        <div class="sell-box" >
          <div class="name clearfix">
            <div class="good-name fl">{{item.productName}}</div>
          </div>
          <div class="summary">{{item.keyword}}</div>
          <div class="card">
            <div class="price-line">
              <h5 class="sku-title">售价</h5>
              <div class="price">
                <span class="money-symbol">¥</span>
                <span class="value">{{item.shopPrice}}</span>
              </div>
            </div>
            <div class="good-detail">
              <h5 class="sku-title">商品详情</h5>
              <div class="introduce">{{item.description}}</div>
            </div>
          </div>
          <div v-if="!($route.query.from =='OA')">
            <div class="address-line">
              <h5 class="sku-title">关于卖家</h5>
              <div class="address" @click="remark()">{{userData.name}}</div>
              
              <h5 class="sku-title">手机号码</h5>
              <div class="address">{{userData.phone}}</div>
              <el-dialog title="对他的评价" :visible.sync="outerVisible" :lockScroll="false">
                <el-table :data="gridData" @row-click="seeComment">
                  <el-table-column property="buyerName" label="用户" width="80"></el-table-column>
                  <el-table-column property="creat_time" label="日期" width="120"></el-table-column>
                  <el-table-column property="content" label="评价"></el-table-column>
                </el-table>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="outerVisible = false">关 闭</el-button>
                </div>
              </el-dialog>
            </div>
            <!-- <div class="count-line">
              <h5 class="sku-title count-title">数量</h5>
            </div>-->
            <div class="btn-line">
              <div class="buy-btn-container">
                <a class="m-btns m-btn-middle m-btn-brown-stroke" @click="huoqudizhi">购买</a>
                <a class="m-btns m-btn-middle m-btn-brown"  @click="addCart">加入购物车</a>
              </div>
              <div class="favor-btn" @click="item.fav ? delFav() : addFav()" style="width:11%">
                <a class="el-icon-star-off m-icons"></a>
                <p id ="fav">{{fav}}</p>
              </div>
            </div>
          </div>

        </div>
      </div>
      <el-dialog title="评价" :visible.sync="dialogFormVisible" class="dialog" center :lockScroll="false">
            <table  style="width: 100%;height:100%;table-layout: fixed;">
          <tr>
            <td>
                <span class="demonstration">商品评分</span>
                <br><br><br>
                <el-rate v-model="form.point" :disabled="true" ></el-rate>
            </td>
            <td rowspan="2" > 
            <template>
              <el-carousel :interval="4000" type="card" height="300px">
                <el-carousel-item v-for="item in form.imgs" :key="item">
                  <img style="height:100%" :src="item" alt />
                </el-carousel-item>
              </el-carousel>
            </template>
          </td>
          </tr>
          <tr >
            <td >
              <br><br><br>
              <el-input type="textarea" :disabled="true" :rows="20" placeholder="请输入内容" v-model="form.content"></el-input>
            </td>
          </tr>
        </table>
          <!-- <el-upload
          :file-list="fileList"
          list-type="picture-card"
          action="http://127.0.0.1:8081/api/file/upload"
        > 

          <i class="el-icon-plus"></i>
        </el-upload> -->
          <!-- <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="commet()">确 定</el-button>
          </div> -->
      </el-dialog>
    </div>
    
  <el-dialog
    title="请选择收货地址"
    :visible.sync="dialogVisible"
    width="60%"
    center
    >
    <el-table
      ref="multipleTable"
      :data="dzlist"
      tooltip-effect="dark"
      style="width: 100%"
      highlight-current-row
      @selection-change="change"
      >
      <el-table-column
        type="selection"
        width="55">
       </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        label="电话"
        prop="mobile"
        width="120">
      </el-table-column>
     <el-table-column
        prop="province"
        label="省"
        show-overflow-tooltip>
         </el-table-column>
      <el-table-column
        prop="city"
        label="县"
        show-overflow-tooltip>
         </el-table-column>
      <el-table-column
        prop="local"
        label="区"
        show-overflow-tooltip>
         </el-table-column>
       <el-table-column
        prop="remark"
        label="详细地址"
        show-overflow-tooltip>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="goumai" >确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      item: {},
      userData: {},
      dialogFormVisible:false,
      imgs:[],
      gridData: [],
      form:{},
      selectList:[],
      dzlist:[],
      imgs: [],
      outerVisible: false,
      innerVisible: false,
      dialogVisible:false,
      formLabelWidth: "120px",
      fav: ''
    };
  },
  created(){
    this.axios.post("/product/info",{
      "id":this.$route.query.id
    }).then((res)=>{
      this.item = res.data
      this.userData = res.data.user
      this.imgs = res.data.imgs.split(',')
      if(this.item.fav){
          this.fav="取消收藏"
      }else{
          this.fav= "收藏"
      }
    })
  },
  methods:{
    remark(){
      this.outerVisible = true
      this.axios.post("/product/remark",{
        "id":this.item.userId
      }).then(resp=>{
          this.gridData = resp.data
      })
    },
     addFav(){
      this.axios.post("userfav/addUserFav",{
        "productId":this.item.id
      }).then(resp=>{
        if(resp.code == 0){
          this.item.fav = true
          document.getElementById("fav").innerHTML = "取消收藏"
          this.$message.success(resp.msg)
        }
        if(resp.code == 201){
          this.$router.push('/login')
        }
        if(resp.code == -1){
         this.$message.error(resp.msg)
        }
      })
    },
    delFav(){
      this.axios.post("product/fav/mine/del",{
         "id":this.item.id
      }).then((resp)=>{
          this.item.fav = false
          document.getElementById("fav").innerHTML = "收藏"
          this.$message.success(resp.msg)
      })
    },
    huoqudizhi(){
        this.dialogVisible = true
        this.axios.get("user/delivers").then((resp)=>{
          if(resp.code == 0){
              this.dzlist = resp.data
          }
          if(resp.code == 201){
            this.$router.push("/login")
          }
        })
    },
    addCart(){
      this.axios.post("/cart/add",{
        "id":this.$route.query.id
      }).then((resp)=>{
          if(resp.code == 0){
             this.$message.success(resp.msg)
          }else if(resp.code == -1){
             this.$message.error(resp.msg)
          }else if(resp.code == 201){
            this.$router.push("/login")
          }
      })
    },
    goumai(){
      if(this.selectList.length!=1){
        this.$message.error("只能选择一个收货地址！")
        return
      }else{
        this.axios.post('/order/goumai',{
          "address":this.selectList[0].id,
          "productId":this.item.id,
        }).then((resp)=>{
          if(resp.code ==0){
            var win = window.open("","_blank")
            win.document.write(resp.data)
            this.dialogVisible = false
          }else{
            this.$message.error(resp.msg)
          }  
        })
      }
    },
    change(val){
      this.selectList = val
    },
    seeComment(row, event, column){
        this.axios.post("/comment/see",{
          id:row.id
        }).then((resp)=>{
        this.form = resp.data
        this.form.imgs = resp.data.imgs.split(',')
        this.dialogFormVisible = true
        })
    }
  }
};
</script>

<style scoped>
.detail {
  width: 1080px;
  height: 450px;
  /* min-height: 285px; */
  padding-top: 60px;
  /* padding-bottom: 100px; */
  overflow: hidden;
  border-top: 1px solid #e7e7e7;
  box-sizing: content-box;
  margin: 0 auto;
  margin-bottom: 5%;
  /* background-color: aquamarine; */
}
.details .main-box {
  min-height: inherit;
  position: relative;
}
.clearfix {
  height: 450px;
  /* margin-bottom: 67px; */
  overflow: unset;
  /* background-color: antiquewhite; */
}
.pro-pic {
  margin-right: 46px;
  width: 465px;
  height: 449px;
  float: left;
  /* background-color: brown; */
}
.pro-pic .pic-box {
  background-color: #f4f4f4;
  border: 1px solid #ececec;
}
.pro-pic .pic-box img {
  height: 100%;
  width: 100%;
}
.sell-box {
  width: 561px;
  height: 450px;
  float: left;
  /* background-color: chartreuse; */
}
.name {
  height: 26px;
  margin-top: 15px;
  margin-bottom: 5px;
}
.name .good-name {
  vertical-align: middle;
  line-height: 26px;
  font-size: 20px;
  color: #333;
}
.summary {
  width: 84%;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  color: #999;
  /* background-color: blue; */
}
.card {
  margin-bottom: 26px;
  margin-top: 18px;
  padding: 10px;
  background-color: #f9f9f9;
}
.card .price-line {
  margin-top: 12px;
  margin-bottom: 12px;
  height: 37px;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 40px;
  font-size: 30px;
}
.sku-title {
  margin-right: 10px;
  width: 48px;
  float: left;
  font-size: 12px;
  font-weight: 400;
  line-height: 32px;
  vertical-align: bottom;
}
.card .price-line .price {
  color: #c00000;
  line-height: 30px;
  overflow: hidden;
}
.card .price-line .price .money-symbol {
  margin-right: 3px;
  font-size: 14px;
  vertical-align: 0;
}
.card .price-line .price .value {
  font-size: 30px;
  vertical-align: 0;
}
.card .good-detail {
  height: 120px;
  margin-bottom: 12px;
  vertical-align: bottom;
  line-height: 24px;
  font-size: 24px;
}
.card .good-detail .introduce {
  overflow: hidden;
}
.address-line {
  height: 40px;
  overflow: hidden;
  padding: 0 10px 26px;
  /* background-color: #999; */
}
.address-line .sku-title {
  line-height: 14px;
}
.address-line .address {
  font-size: 14px;
  float: left;
  line-height: 14px;
  margin-right: 10px;
  font-weight: 400;
  color: #0076a4;
}
.address:hover {
  cursor: pointer;
  text-decoration: underline;
}
.count-line {
  height: 32px;
  overflow: hidden;
  margin-bottom: 40px;
  /* background-color: #999; */
}
.count-line .count-title {
  float: left;
  line-height: 32px;
  margin-left: 10px;
  margin-right: 10px;
}
.btn-line {
  height: 52px;
  overflow: hidden;
  /* background-color: aliceblue; */
}
.m-btns {
  display: inline-block;
  border-radius: 2px;
  text-align: center;
  color: #666;
  border: 1px solid #666;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 6px;
}
.m-btn-middle {
  min-width: 167px;
  height: 52px;
  line-height: 50px;
  font-size: 20px;
}
.m-btn-brown {
  color: #fff;
  background-color: #0076a4;
  border-color: #0076a4;
}
.m-btn-brown-stroke {
  color: #0076a4;
  border-color: #0076a4;
}
a.m-btn-brown-stroke:hover {
  background-color: #0076a4;
  color: #fff;
}
a.m-btn-brown:hover {
  background-color: #fff;
  color: #0076a4;
}

.btn-line .buy-btn-container {
  float: left;
  overflow: hidden;
}
.btn-line .buy-btn-container a {
  margin-right: 15px;
}
.btn-line .favor-btn {
  float: left;
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  border-radius: 2px;
  color: #999;
  line-height: 12px;
  text-align: center;
  font-size: 12px;
}
.favor-btn:hover {
  color: #fff;
  background-color: #0076a4;
  cursor: pointer;
}
.btn-line .favor-btn .m-icons {
  display: block;
  width: 30px;
  height: 26px;
  margin-left: 10px;
  margin-top: 5px;
  color: #999;
}
.btn-line .favor-btn:hover .m-icons {
  color: #fff;
}
.el-icon-star-off:before {
  /* content: "\E63D"; */
  /* width: 100%;
    height: 100%; */
  font-size: 18px;
}
.el-icon-service:before {
  /* content: "\E63A"; */
  font-size: 18px;
}
.btn-line .faver-service-btn {
  margin-left: 15px;
}
</style>
